<template>
  <div id="container">
    <slot></slot>
  </div>
</template>

<script>
window._AMapSecurityConfig = {
  securityJsCode: "4e2e74fb2f41ddba822ef2e3acdeb66b"
};
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "MapView",
  data() {
    return {
      map: null
    };
  },
  components: {},
  computed: {
    mapParams() {
      return Object.assign(
        {
          viewMode: "2D",
          position: [],
          zoom: 3
        },
        this.mapProps
      );
    }
  },
  props: {
    mapProps: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        //  4b5c30752deeb1bdab0931de259b1bea
        // 986dd53672bc1eca7bd5830a2cbfb0cd  // 运维的个人key，有问题联系汪春祥
        key: "986dd53672bc1eca7bd5830a2cbfb0cd", // 申请好的Web端开发者Key，首次调用 load 时必填ec2bfeea19f67a78aa13860e34ee05fc
        version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Autocomplete", //输入提示插件
          "AMap.PlaceSearch", //POI搜索插件
          "AMap.Scale", //右下角缩略图插件 比例尺
          "AMap.OverView", //地图鹰眼插件
          "AMap.ToolBar", //地图工具条
          "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          "AMap.Geolocation", //定位控件，用来获取和展示用户主机所在的经纬度位置
          "AMap.Driving", //轨迹
          "AMap.DragRoute",
          "AMap.MarkerClusterer",
          "AMap.RangingTool",
          "AMap.InfoWindow",
          "AMap.Geocoder",
          "AMap.MoveAnimation",
          "AMap.Bounds",
          "AMap.Rectangle",
          "AMap.MouseTool",
          "AMap.CircleEditor",
          "AMap.PolyEditor",
          "AMap.RectangleEditor",
          "AMap.DistrictSearch", // 搜索行政区
          "AMap.Polygon" //绘制行政区
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          version: "1.1",
          plugins: ["overlay/SimpleInfoWindow"]
        }
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            mapStyle: "amap://styles/d0b6c23008b9e06145e0795ffe132fdb",
            ...this.mapParams
          });
          this.$emit("initMapInstance", this.map);
          this.map.setPitch(35);
          this.map.setStatus({
            pitchEnable: false,
            rotateEnable: false
          });
        })
        .catch((e) => {
          console.log(e);
        });
    }
  }
};
</script>
<style lang="less" scoped>
#container {
  height: 100%;
  border-radius: 8px;
  /deep/ .amap-logo {
    display: none;
    opacity: 0 !important;
  }
  /deep/ .amap-copyright {
    opacity: 0;
  }
  /* padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px; */
}
</style>
